<template>
    <!-- 通用查看签到弹框 -->
    <base-modal :footer="null"  title="签到人员" :closable="true" @cancel="handleClose" :visible="visible" width="1200px">
        <s-table
            bordered
            ref="table"
            size="default"
            rowKey="key"
            :columns="column"
            :data="loadData"
            :alert="true"
            show-size-changer
            show-quick-jumper
            :showPagination="false"
            :scroll="{ y: 500 }"
        >
            <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
            <template slot="isSignIn" slot-scope="text, record, index">
              <template v-if="text">
                <span v-if="(record.userId && record.employeeId)">是</span>
                <span v-else>-</span>
              </template>
              <span v-else style="color: #FB0000;">否</span>
            </template>
        </s-table>
    </base-modal>
</template>

<script>
import { reservationDetail } from '@/api/office/anualConference/index'
import BaseModal from '@/components/BaseModal'
import { STable } from '@/components'

const column = [
    {
        title: '序号',
        dataIndex: 'serial',
        width:'75px',
        scopedSlots: { customRender: 'serial' },
    },
        {
        title: '所属单位',
        dataIndex: 'unitName',
        width: '18%',
    },
    {
        title: '岗位',
        dataIndex: 'postName',
        width: '13%',
    },
    {
        title: '姓名',
        dataIndex: 'userName',
    },
    {
        title: '是否签到',
        dataIndex: 'isSignIn',
        width:'120px',
        scopedSlots: { customRender: 'isSignIn' }
    },
    {
        title: '签到地点',
        dataIndex: 'signAddress',
        ellipsis: true,
  } ,
    {
        title: '签到时间',
        dataIndex: 'signInTime',
    },
]

export default {
    name: 'MeetSign',
    components: {
        BaseModal,
        STable,
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        this.column = column

        return {
            loadData: async (parameter) => {
              try {
                const res = await reservationDetail({ id: this.$route.query.id });
                const attendLeaderList = res.data.attendLeaderList ? res.data.attendLeaderList : [];
                const attendList = res.data.attendList ? res.data.attendList : [];
                const datas = [
                  ...attendLeaderList,
                  ...attendList
                ]
                datas.map((item, index) => {
                  item.key = item.userId + '_' + index;
                  return item;
                })
                return Promise.resolve({
                  data: datas
                })
              } catch (e) {
                this.spinning = false;
                return Promise.reject(e)
              }
            },
        }
    },
    created() {},
    methods: {
        handleClose() {
            this.$emit('confirm')
        },
    },
    watch: {
        visible(v) {
            if (v) {
                this.$nextTick(() => {
                    this.$refs.table.refresh()
                })
            } else {
                if (this.$refs.table) {
                    this.$refs.table.localDataSource = []
                }
            }
        },
    },
}
</script>

